import React, { Component } from 'react'
import {Text, View, StyleSheet, Platform, TouchableOpacity, Alert, DeviceEventEmitter} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons'
import {FLAG_LANGUAGE, LanguageDao} from '../js/expand/dao/LanguageDao';
import { connect } from 'react-redux'
const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;

class SortHeader extends Component {
  constructor(props) {
    super(props);
    this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
  }
  // getTitle() {
  //   const route = this.props.navigation.state.routes;
  //   const index = this.props.navigation.state.index;
  //   console.log('route', route, index)
  //   return route[index].routeName
  // }
  onBack() {
    if(this.props.navigation.state.params && this.props.navigation.state.params.checkedArray) {
      if(JSON.stringify(this.props.navigation.state.params.originalCheckedArray) === JSON.stringify(this.props.navigation.state.params.checkedArray)) {
        this.props.navigation.pop();
        return;
      }
      Alert.alert(
        '提示',
        '要保存修改吗？',
        [
          {text: '不保存', onPress: ()=> (this.back())},
          {text: '保存', onPress: ()=> (this.save())}
        ]
      )
    }else {
      this.props.navigation.pop();
      return;
    }
  }

  back() {
    this.props.navigation.pop()
  }

  save() {
    if(this.props.navigation.state.params && this.props.navigation.state.params.checkedArray) {
      this.languageDao.fetch().then(result => {
        let arr = this.props.navigation.state.params.checkedArray
        let count = 0
        let res = []
        for(let i=0; i< result.length; i++) {
          console.log(result[i].checked)
          if(result[i].checked) {
            console.log('123')
            res[i] = arr[count]
            count ++
          }else {
            res[i] = result[i]
          }  
        }
        console.log('res', res)
        this.languageDao.save(res);
        this.props.navigation.pop();
        DeviceEventEmitter.emit('customKey');
      }).catch(error => {
  
      })
    } else {
      this.props.navigation.pop();
    }
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.themeColor,}]}>
        <TouchableOpacity onPress={()=> (this.onBack())}>
          <Ionicons
            name='md-arrow-back'
            size={26}
            style={{ color: 'white' }}
          />
        </TouchableOpacity>
        <Text style={styles.navBar}>标签排序</Text>
        <TouchableOpacity onPress={() => (this.save())}>
          <Text style={{color: '#fff'}}>保存</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 10,
    paddingRight: 10,
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  navBar: {
    color: '#fff',
    fontSize: 14
  }
})


export default connect((state)=> ({themeColor: state.theme.themeColor}), null)(SortHeader)